<template>
  <div class="webReg">
    <div class="reg">
      <div class="form">
        <div>
          <p>邮箱</p>
          <input autofocus="autofocus" v-model="userEmail" type="text" />
        </div>
        <div>
          <p>密码</p>
          <input v-model="userPassword" type="password" />
        </div>
        <div>
          <p>确认密码</p>
          <input v-model="isUserPassword" type="password" />
        </div>
        <div>
          <p>昵称</p>
          <input v-model="userName" type="text" />
        </div>
        <div>
          <!-- 点击切换验证码 -->
          <p>验证码</p>
          <input v-model="inputCode" class="vcode" type="text" />
          <span @click="myRandom"
            >{{ myCode }}
            <img v-if="isLoading" src="../assets/images/loading2.gif" alt="" />
          </span>
        </div>
        <div>
          <input @click="myCreateUser" type="submit" value="创建用户" />
        </div>
      </div>
      <div class="loading" v-if="isLoading">
        <p>{{tip}}</p>
        <img draggable="false" src="../assets/images/loading.gif" alt="" />
      </div>
      <div class="isHave">
        <div class="have">
          <p>已经有账号了？</p>
          <router-link to="/home/login">马上登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "webReg",
  data() {
    return {
      myCode: "获取验证码",
      inputCode: "",
      isVcode: true,
      userEmail: "",
      userPassword: "",
      isUserPassword: "",
      userName: "",
      isLoading: false,
      timer: null,
      num: 0,
      tip:"网有点卡，稍等一下...",
      t:null,
      num2:4
    };
  },
  methods: {
    myRandom() {
      this.isLoading = true;
      this.myCode = "";
      this.t = setInterval(() => {
        this.num += 1;
        if(this.num > 4){
            this.tip = "再等等，快好了"
        }
        if(this.num > 8){
            this.tip = "真的快好了，信我"
        }
        if(this.num > 10){
          this.num2 --;
          this.tip = this.num2;
        }
        // console.log(this.num);
      }, 1000);
      this.timer = setTimeout(() => {
        this.isLoading = false;
        let v1 = Math.floor(Math.random() * (100 - 10) + 10);
        let v2 = Math.floor(Math.random() * (100 - 10) + 10);
        this.myCode = String(v1) + String(v2);
        this.num = 0;
        this.num2 = 4;
        clearInterval(this.t)
        this.tip = "网有点卡，稍等一下..."
      }, 5000);

      // console.log(v1,v2);
      // console.log(this.myCode);
    },
    myCreateUser() {
      // 判断邮箱，密码，昵称长度
      if (
        this.userEmail.length == 0 ||
        this.userPassword.length == 0 ||
        this.isUserPassword.length == 0
      ) {
        alert("密码或邮箱不能为空");
        return false;
      }
      if (this.userName.length == 0) {
        alert("请输入昵称");
        return false;
      }
      // 判断两次密码是否相同
      if (this.userPassword != this.isUserPassword) {
        alert("两次输入的密码不相同");
        this.isUserPassword = "";
        return false;
      }
      // 判断验证码
      if (this.myCode != this.inputCode) {
        alert("验证码输入有误请重新输入");
        this.myCode = "重新获取验证码";
        this.inputCode = "";
        return false;
      }
      // 正则表达式匹配邮箱密码格式
      let userEmail = /^[0-9]{6,13}@(qq.com|126.com|163.com)$/;
      let userPassword = /[0-9a-zA-Z]{6,}/;
      // console.log(userEmail.test("1762091400@qq.com"));
      // console.log(userPassword.test("a21312aa213"));

      if (
        userEmail.test(this.userEmail) &&
        userPassword.test(this.userPassword)
      ) {
        let obj = { email: this.userEmail, password: this.userPassword ,name:this.userName};
        alert("注册成功");
        localStorage.setItem("userMsg", JSON.stringify(obj));
        this.$store.state.userEmail = this.userEmail;
        this.$store.state.userName = this.userName;
        this.$store.state.userPassword = this.userPassword;
        this.$router.push({ path: "/home/login" });
        this.myCode = "获取验证码";
        return false;
      } else {
        alert("邮箱格式输入有误");
        this.userPassword = "";
        return false;
      }
    },
  },
  mounted() {
    // this.myCreateUser();
  },
};
</script>

<style lang="less" scoped>
.webReg {
  width: 100%;
  .reg {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .form {
      flex-grow: 1;
      padding-top: 20px;
      box-sizing: border-box;
      div {
        margin-bottom: 12px;
        p {
          font-size: 14px;
          margin-bottom: 10px;
        }
        input {
          border: 1px solid #ccc;
          height: 35px;
          width: 215px;
          padding-left: 5px;
          font-size: 14px;
          &:hover {
            border-radius: 5px;
          }
        }
        input[type="submit"] {
          width: 120px;
          font-weight: bold;
          font-size: 16px;
          cursor: pointer;
        }
        .vcode {
          width: 80px;
          margin-right: 10px;
        }
        span {
          display: inline-block;
          border: 1px solid #ccc;
          color: #808080;
          font-size: 22px;
          font-weight: bold;
          border-radius: 5px;
          padding: 0 5px;
          vertical-align: middle;
          cursor: pointer;
          text-shadow: -1px 1px 5px #b54b00;
          img {
            width: 40px;
          }
        }
      }
    }
    .loading {
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -160px;
      text-align: center;
      img {
        border-radius: 20px;
      }
      p {
        color: #808080;
        font-size: 25px;
        font-weight: bold;
        margin-bottom: 10px;
      }
    }
    .isHave {
      flex-basis: 270px;
      padding-top: 100px;
      box-sizing: border-box;
      .have {
        height: 100px;
        border-left: 1px solid #ccc;
        padding: 30px 0 0 20px;
        box-sizing: border-box;
        p {
          margin-bottom: 10px;
        }
        a {
          font-size: 14px;
          color: #808080;
        }
      }
    }
  }
}
</style>